---
type: integration
title: '@astrojs/react'
description: Aprenda como usar a integração @astrojs/react para estender o suporte a componentes em seu projeto Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/react/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Esta **[integração Astro][astro-integration]** habilita a renderização no servidor e a hidratação no cliente para seus componentes [React](https://react.dev/).

## Instalação

O Astro inclui o comando `astro add` para automatizar a configuração de integrações oficiais. Se preferir, você pode [instalar as integrações manualmente](#instalação-manual) em vez disso.

Para instalar `@astrojs/react`, execute o seguinte comando no diretório do seu projeto e siga as instruções:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

Se encontrar algum problema, [sinta-se à vontade para relatar no GitHub](https://github.com/withastro/astro/issues) e tente as etapas de instalação manual abaixo.

### Instalação manual

Primeiro, instale o pacote `@astrojs/react`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

A maioria dos gerenciadores de pacotes também instalará as dependências associadas. Se você vir o aviso "Cannot find package 'react'" (ou similar) ao iniciar o Astro, você precisará instalar `react` e `react-dom`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install react react-dom
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add react react-dom
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add react react-dom
  ```
  </Fragment>
</PackageManagerTabs>

Em seguida, utilize a integração no seu arquivo `astro.config.*` usando a propriedade `integrations`:

```js ins="react()" ins={2} title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [react()],
});
```

## Primeiros passos

Para usar seu primeiro componente React no Astro, acesse nossa [documentação de frameworks de UI][astro-ui-frameworks]. Você irá explorar: 

* 📦 como componentes de frameworks são carregados
* 💧 opções de hidratação no cliente, e
* 🤝 oportunidades de misturar e aninhar frameworks


## Opções

### Combinando múltiplos frameworks JSX

Quando você utiliza múltiplos frameworks JSX (React, Preact, Solid) no mesmo projeto, o Astro precisa determinar quais transformações específicas de framework JSX devem ser usadas para cada um dos seus componentes. Se você adicionou apenas uma integração de framework JSX ao seu projeto, nenhuma configuração extra é necessária.

Use as opções de configuração `include` (obrigatório) e `exclude` (opcional) para especificar quais arquivos pertencem a qual framework. Forneça um array de arquivos e/ou pastas para `include` para cada framework que você está usando. Curingas podem ser usados para incluir vários caminhos de arquivo.

Nós recomendamos colocar componentes de frameworks semelhantes na mesma pasta (ex. `/components/react/` e `/components/solid/`) para facilitar a especificação de seus includes, mas isso não é obrigatório:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // Habilite muitos frameworks para suportar todos os tipos diferentes de componentes.
  // Nenhum `include` é necessário se você estiver usando apenas um framework JSX!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});
```

### Conversão de filhos

Filhos passados para um componente React de um componente Astro são analisadas como strings simples, não como nós React.

Por exemplo, o `<ReactComponent />` abaixo receberá apenas um único elemento filho:


```astro
---
import ReactComponent from './ReactComponent';
---

<ReactComponent>
  <div>um</div>
  <div>dois</div>
</ReactComponent>
```

Se você estiver usando uma biblioteca que *espera* que mais de um elemento filho seja passado, por exemplo, para que ela possa encaixar certos elementos em lugares diferentes, você pode achar isso um bloqueio.

Você pode definir a opção experimental `experimentalReactChildren` para dizer ao Astro para sempre passar filhos para o React como nós virtuais do React. Há um custo de tempo de execução para isso, mas pode ajudar com a compatibilidade.

Você pode habilitar esta opção na configuração para a integração React:

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
  ],
});
```

[astro-integration]: /pt-br/guides/integrations-guide/

[astro-ui-frameworks]: /pt-br/guides/framework-components/#usando-componentes-de-frameworks
